﻿{% extends "basecontent.html" %}
{% block title %}{{query}} - {{appname}}{% endblock %}
{% block css %}
.appSumBox {
	margin-bottom:5px;
}
.appChartTitle {
	text-align:center;
	font-size:larger;
	font-weight:bold;
	margin-bottom:5px;
}
.appChartDate {
	text-align:center;
	font-size:normal;
	margin-bottom:5px;
	color: blue;
}
.appChartLabel {
	text-decoration:underline;
	cursor:pointer;
	color:#336699;
}
{% endblock %}
{% block js %}
{% if data %}
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">
google.load("visualization", "1",{"packages": [
"AreaChart",
"BarChart",
"ColumnChart",
"LineChart",
"PieChart",
"Table"]});
google.setOnLoadCallback(draw{{charttype}});
 
var data = null;
var dataView = null;
var area = null;
var bar = null;
var column = null;
var line = null;
var pie = null;
var table = null;
var curr = "";
var cols = { {% for col in cols %}{{forloop.counter}}:true{% if not forloop.last %},{% endif %}{% endfor %} };
var colors = {1:"#4684EE",
							2:"#DC3912",
							3:"#FF9900",
							4:"#008000",
							5:"#666666",
							6:"#4942CC",
							7:"#CB4AC5",
							8:"#D6AE00",
							9:"#336699",
							10:"#DD4477",
							11:"#AAAA11",
							12:"#66AA00",
							13:"#888888",
							14:"#994499",
							15:"#DD5511",
							16:"#22AA99",
							17:"#999999",
							18:"#705770",
							19:"#109618",
							20:"#A32929"};
var borderColors = {1:"#A2C1F6",
							2:"#ED9C88",
							3:"#FFCC7F",
							4:"#7FBF7F",
							5:"#B2B2B2",
							6:"#A4A0E5",
							7:"#E5A4E2",
							8:"#EAD67F",
							9:"#99B2CC",
							10:"#EEA1BB",
							11:"#D4D488",
							12:"#B2D47F",
							13:"#C3C3C3",
							14:"#CCA1CC",
							15:"#EEAA88",
							16:"#90D4CC",
							17:"#CCCCCC",
							18:"#B7ABB7",
							19:"#87CA8B",
							20:"#D19494"};



function draw(charttype) {
	if ("AreaChart" == charttype) drawAreaChart();
	else if ("BarChart" == charttype) drawBarChart();
	else if ("ColumnChart" == charttype) drawColumnChart();
	else if ("LineChart" == charttype) drawLineChart();
	else if ("PieChart" == charttype) drawPieChart();
	else if ("Table" == charttype) drawTable();
}

function getData() {
	if (null == data) {
		data = new google.visualization.DataTable({{data}}, 0.5);
		dataView = new google.visualization.DataView(data);
	}
	dataView.setColumns(getCols());
}

function switchChart(charttype) {
	if ("" != curr) {
		document.getElementById(curr).style.display = "none";
		document.getElementById(curr+"Label").style.fontWeight = "normal";
	}
	curr = charttype;
	document.getElementById(curr).style.display = "";
	if ("Table" != curr) {
		document.getElementById(curr).style.width = "100%";
		document.getElementById(curr).style.height = screen.height*0.6+"px";
	}
	document.getElementById(curr+"Label").style.fontWeight = "bold";
}

function drawAreaChart() {
	getData();
	switchChart("AreaChart");
	if (null == area) {
		area = new google.visualization.AreaChart(document.getElementById("AreaChart"));
		google.visualization.events.addListener(area, "onmouseover", onmouseoverHandler);
	}
	area.draw(dataView, getOptions());
	drawLegend();
}
function drawBarChart() {
	getData();
	switchChart("BarChart");
	if (null == bar) {
		bar = new google.visualization.BarChart(document.getElementById("BarChart"));
		google.visualization.events.addListener(bar, "onmouseover", onmouseoverHandler);
	}
	bar.draw(dataView, getOptions());
	drawLegend();
}
function drawColumnChart() {
	getData();
	switchChart("ColumnChart");
	if (null == column) {
		column = new google.visualization.ColumnChart(document.getElementById("ColumnChart"));
		google.visualization.events.addListener(column, "onmouseover", onmouseoverHandler);
	}
	column.draw(dataView, getOptions());
	drawLegend();
}
function drawLineChart() {
	getData();
	switchChart("LineChart");
	if (null == line) {
		line = new google.visualization.LineChart(document.getElementById("LineChart"));
		google.visualization.events.addListener(line, "onmouseover", onmouseoverHandler);
	}
	line.draw(dataView, getOptions());
	drawLegend();
}
function drawPieChart() {
	getData();
	switchChart("PieChart");
	if (null == pie) {
		pie = new google.visualization.PieChart(document.getElementById("PieChart"));
		google.visualization.events.addListener(pie, "onmouseover", onmouseoverHandler);
	}
	pie.draw(dataView, getOptions());
	drawLegend();
}
function drawTable() {
	getData();
	switchChart("Table");
	drawLegend();
	if (null == table)
		table = new google.visualization.Table(document.getElementById("Table"));
	table.draw(data);	
}
function drawLegend() {
	if ("Table" == curr) {
		document.getElementById("Legend").style.display = "none";
		document.getElementById("ChartTipToolbar").style.display = "none";
		return;
	}
	for (i in cols) {
  	if (cols[i]) {
  		document.getElementById("col"+i).style.backgroundColor = colors[mod(i, 20)];
  		document.getElementById("col"+i).style.borderColor = borderColors[mod(i, 20)];
  	}
  	else {
  		document.getElementById("col"+i).style.backgroundColor = "white";
  		document.getElementById("col"+i).style.borderColor = colors[mod(i, 20)];
  	}  	
  	document.getElementById("col"+i).style.color = document.getElementById("col"+i).style.backgroundColor;
  }
  document.getElementById("Legend").style.display = "block";
}
function getCols() {
	var l = [0];
  var j = 1;
  for (i in cols) {
  	if (cols[i]) {
  		l[j] = Number(i);
  		j++;
  	}
  }
	return l;
}
function getColors(l) {
	var newcolors = [];
  var j = 0;
  for (i in l) {
  	if (0 == l[i]) continue;
  	newcolors[j] = colors[mod(l[i], 20)];
    j++;
  }
  return newcolors;
}
function getOptions() {
	return {legend:"none", enableTooltip:false, colors:getColors(getCols())};
}
function switchCol(i) {
	if (cols[i]) cols[i] = false;
	else cols[i] = true;
	draw(curr);
}
function switchAllCol(display) {
	for (i in cols) {
		cols[i] = display;
	}
	draw(curr);
}
function onmouseoverHandler(e) {
	var r = e.row;
	if ("AreaChart" == curr || "LineChart" == curr) {
		var offset = 0;
		var notnull = 0;
		for (i=0;i<data.getNumberOfRows();i++) {
			if (dataView.getValue(i, e.column) == null) offset++;
			else notnull++;
			if (notnull == e.row+1) break;
		}
		r = e.row + offset;		
	}
	showTip(r, e.column);
}
function showTip(row, column) {
	document.getElementById("ChartTipToolbar").style.display = "block";
	document.getElementById("ChartTip").innerHTML = "提示：" + dataView.getValue(row, 0) + " " + dataView.getColumnLabel(column)+" "+dataView.getValue(row, column);
}
function mod(x, y) {
	r = x % y;
	if (0 == r) return y;
	return r;
}
function showTree(btnId, treeId) {
	if ("-" == document.getElementById(btnId).innerHTML) {
		document.getElementById(btnId).innerHTML = "+";
		document.getElementById(treeId).style.display = "none";
	}		
	else {
		document.getElementById(btnId).innerHTML = "-";
		document.getElementById(treeId).style.display = "";
	}
}
</script>
{% endif %}
{% endblock %}
{% block content %}
<div style="background:#F6F6F6;border: 1px solid #E5E5E5;text-align:right;margin-bottom:5px;">
<span id="toolbar_div" style="float:left;"><a href="./userreporterror?url={{url}}" style="text-decoration:none;color:red;">报告错误</a></span>
<span id="AreaChartLabel" class="appChartLabel" onclick=draw("AreaChart")>面积图</span>
<span id="BarChartLabel" class="appChartLabel" onclick=draw("BarChart")>条形图</span>
<span id="ColumnChartLabel" class="appChartLabel" onclick=draw("ColumnChart")>柱形图</span>
<span id="LineChartLabel" class="appChartLabel" onclick=draw("LineChart")>折线图</span>
<span id="PieChartLabel" class="appChartLabel" onclick=draw("PieChart")>饼图</span>
<span id="TableLabel" class="appChartLabel" onclick=draw("Table")>表格</span>
</div>
<div class="appChartTitle">{{tags}}{% if hasdetail %} <a href="./queryrelatedtag?q={{fmttags}}"  title="细分结果" style="text-decoration:none;color:gray;">+</a>{% endif %}</div>
{% if begin %}
<div class="appChartDate">({{begin}} - {{end}}) <span id="switchDate" style="cursor:pointer;" title="调整日期" onclick=showTree("switchDate","dateForm")>+</span></div>
<div id="dateForm" style="display:none;text-align:center;">{% include "fmdate.html" %}</div>
{% endif %}
<div id="AreaChart" style="display:none;"></div>
<div id="BarChart" style="display:none;"></div>
<div id="ColumnChart" style="display:none;"></div>
<div id="LineChart" style="display:none;"></div>
<div id="PieChart" style="display:none;"></div>
<div id="Table" style="display:none;"></div>
<div id="ChartTipToolbar" style="font-size:smaller;padding:3px 1px 3px 1px;background-color:#FFFFE1;display:none;border:1px solid #E0E0E0;"><span style="cursor:pointer;margin-right:5px;color:gray;" onclick=document.getElementById("ChartTipToolbar").style.display="none">[关闭]</span><span id="ChartTip" style="color:blue;"></span></div>
<div id="Legend" style="display:none;font-size:smaller;line-height:35px;">
<span style="color:gray;">选择：</span><span style="cursor:pointer;margin-right:5px;" onclick=switchAllCol(true)>全部</span><span style="cursor:pointer;margin-right:5px;" onclick=switchAllCol(false)>无</span>
{% for col in cols %}
<span id="col{{forloop.counter}}" style="cursor:pointer;border:1px solid;margin-right:2px;" onclick=switchCol({{forloop.counter}})>__</span><span style="cursor:pointer;margin-right:5px;" onclick=switchCol({{forloop.counter}})>{{col}}</span>
{% endfor %}
</div>
<div style="font-size:smaller;color:gray;text-align:right;"><span id="switchLink" style="cursor:pointer;" title="网页链接" onclick=showTree("switchLink","dataLinks")>+</span> 数据来源：{% for item in source %}<a href="{{item}}" style="text-decoration:none;color:green;">{{item}}</a> {% endfor %}</div>
<div id="dataLinks" style="font-size:smaller;text-align:right;display:none;">{% for item in links %}<a href="{{item}}" target="_blank">{{item}}</a><br>{% endfor %}</div>
{% endblock %}